@charset "utf-8";
/* 头部 */
header{
	display: flex;
	justify-content: space-between;
	align-items: center;
	height: 98px;
	padding: 0 40px 0 47px;
	.logo {
		width: 69px;
		height: 65px;
		img {
			width: 100%;
		}
	}
	nav {
		display: flex;
		ul {
			display: flex;
			li {
				position: relative;
				display: flex;
				margin-left: 80px;
				a {
					text-align: center;
					h3 {
						font-size: 16px;
						color: #0d0d0d;
						transition: all .5s;
					}
					span {
						font-size: 14px;
						color: #838383;
						transition: all .5s;
					}
				}
				&:hover a h3, &:hover a span {
					color: #12b2a5;
				}
				&::before {
					content: "";
					position: absolute;
					left: 0;
					top: 0;
					background-color: #d6d6d6;
					transition: all 1s;
				}
				&::after {
					content: "";
					position: absolute;
					right: 0;
					top: 0;
					background-color: #d6d6d6;
					transition: all 1s;
				}
				&:hover::before {
					width: 1px;
					height: 40px;
					transform: translateY(-25px) rotate(35deg);
				}
				&:hover::after {
					width: 1px;
					height: 40px;
					transform: translateY(25px) rotate(35deg);
				}
			}
			.active {
				position: relative;
				a h3,a span {
					color: #12b2a5;
				}
				&::before {
					content: "";
					position: absolute;
					left: 0;
					top: 0;
					width: 1px;
					height: 40px;
					transform: translateY(-25px) rotate(35deg);
					background-color: #d6d6d6;
				}
				&::after {
					content: "";
					position: absolute;
					right: 0;
					top: 0;
					width: 1px;
					height: 40px;
					transform: translateY(25px) rotate(35deg);
					background-color: #d6d6d6;
				}
			}
		}
		.weixin {
			margin-left: 67px;
		}
	}
}
// 内容
.main {
	.header {
		width: 100%;
		height: 71px;
		background-color: #08cacc;
		.breakcrumb {
			line-height: 71px;
			display: flex;
			margin-left: 56px;
			li {
				position: relative;
				margin-right: 28px;
				color: white;
				&:not(:last-of-type)::after {
					content: "";
					position: absolute;
					top: 50%;
					right: -20px;
					width: 8px;
					height: 16px;
					background: url(../img/right_arrow.png) no-repeat center center / contain;
					transform: translateY(-50%);
				}
			}
		}
	}
	.sub_nav {
		position: relative;
		height: 107px;
		background-color: #fccf00;
		text-align: center;
		line-height: 107px;
		.nav {
			span {
				display: inline-block;
				height: 34px;
				line-height: 34px;
				padding: 0 20px;
				font-size: 14px;
				background-color: white;
				border-radius: 34px;
				margin: 0 5px;
				cursor: pointer;
				&:hover {
					color: white;
					background-color: #08cacc;
				}
			}
			.active {
				color: white;
				background-color: #08cacc;
			}
		}
		.photo {
			position: absolute;
			top: 50%;
			right: 40px;
			transform: translateY(-50%);
			span {
				display: inline-block;
				vertical-align: middle;
				font-size: 24px;
				color: white;
			}
			.head_img {
				display: inline-block;
				vertical-align: middle;
				width: 55px;
				height: 55px;
				cursor: pointer;
				margin-left: 10px;
				border: 1px solid #62cf91;
				border-left-color: transparent;
				border-top-color: transparent;
				border-radius: 50%;
				padding: 4px;
				img {
					display: block;
					width: 100%;
				}
			}
		}
		&::after {
			content: "";
			position: absolute;
			left: 0;
			bottom: -20px;
			width: 100%;
			height: 39px;
			background: url(../img/bolang.png);
		}
	}
	.form {
		width: 614px;
		height: 495px;
		margin: 100px auto 750px;
		display: flex;
		justify-content: space-between;
		.icon {
			position: relative;
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			li {
				position: relative;
				color: #cacaca;
				i {
					font-size: 80px;
					vertical-align: middle;
				}
				span {
					margin-left: 15px;
					font-size: 14px;
					color: #585858;
				}
				&:not(:last-child)::after {
					content: "";
					position: absolute;
					left: 31px;
					top: 95px;
					width: 21px;
					height: 27px;
					background: url(../img/bottom_arrow.png);
				}
			}
			.active, .active span {
				color: #08cacc;
			}
			&::after {
				content: "";
				position: absolute;
				top: 0;
				right: -70px;
				height: 100%;
				border-right: 2px dashed #cacaca;
			}
		}
		.inp {
			position: relative;
			input:not(:last-of-type) {
				display: block;
				width: 270px;
				height: 54px;
				padding: 0 24px;
				font-size: 16px;
				border-radius: 5px;
				background-color: #f7f7f7;
				margin-bottom: 27px;
				border: none;
				box-shadow: 2px 2px 5px rgba(0,0,0,.2);
			}
			input:last-of-type {
				position: absolute;
				left: 0;
				bottom: 0;
				cursor: pointer;
				width: 118px;
				height: 40px;
				border-radius: 40px;
				border: 1px solid #cacaca;
				background-color: white;
				outline: none;
				color: #767676;
				font-size: 16px;
				&:hover {
					color: white;
					background-color: #08cacc;
				}
			}
		}
	}
}
// 尾部
footer {
	position: relative;
	img {
		display: block;
		width: 100%;
	}
	p {
		position: absolute;
		left: 50%;
		top: 70%;
		transform: translateX(-50%);
		color: white;
		font-size: 12px;
	}
}